<template>
	<view class="my-content">
		<view class="search">
			<div style="padding: 30rpx;">
				<u-search v-model="keyword" :show-action="false" :placeholder="$t('根据关键字进行搜索')" @search="search"></u-search>
			</div>
			<view class="mu-content-top">
				<view class="area">
					<!--          :class="current === index ? 'sel' : ''"-->
					<view v-for="(item, index) in categoryList" :key="index" class="area_item"
						@click="selCategory(item)">
						<image :src="item.image" style="width: 59.3rpx;height: 59.3rpx;"></image>
						<text :class="current === item.id ? 'sel' : ''" class="_text">
							{{ item[$t('item.name')] }}
						</text>
					</view>
				</view>
			</view>
			<u-dropdown ref="uDropdown" @open="open1" style="background: #f6f6f6;margin-top: 24rpx;">
				<u-dropdown-item v-model="value1" :options="options1" :title="$t('国家')"
					@change="change"></u-dropdown-item>
				<u-dropdown-item :title="$t('地区')"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="bidding_news">
			<LifeadvertisingListItem :item="i" v-for="i in sotreData1" :key="i.id" @click.native="details(i)"
				@communicates="communicates" @communicate="communicate" @userPage="userPage"></LifeadvertisingListItem>
		</view>
		<u-select v-model="cityShow1" :list="cityList" mode="mutil-column-auto" @confirm="kouan"></u-select>
		<!-- 客服窗口 -->
		<Service />
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
	</view>
</template>

<script>
	import {
		createC2CConversation,
		isBase64,
		time,
		ImageUrl
	} from "@/common/public";
	import {
		IMAGE_URL
	} from "@/config/app";
	import {
		mapForm
	} from "@/pages/release/buildFormItems";
	import Service from '@/components/service/service.vue'
	import vipPopup from "@/components/vipPopup/index.vue";
	import LifeadvertisingListItem from "@/components/detail/LifeadvertisingListItem.vue";

	export default {
		components: {
			Service,
			vipPopup,
			LifeadvertisingListItem
		},
		data() {
			return {
				lang: getApp().globalData.lang,
				sotreData1: [],
				keyword: "",
				categoryList: [],
				current: "",
				value1: "",
				value2: "",
				options1: [],
				cityShow1: false,
				cityList: [],
				city: "",
				type: 1,
				page: 2, //分页数据
				report: false,
				auth: '',
				vipShow: false,
				//后台开关验证 vip权限
				vip:false,
			};
		},
		onLoad({
			type
		}) {
			this.type = type
			this.GoodsList({
				type
			})
			this.getCategoryList()
			this.getActionSheetLists()
			this.getSelectCityLists()
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
			})
			uni.showLoading({
				title: "Loading...",
				mask: true
			})
			
			this.$u.api.basic.getSelectCityList({pid:1}).then(res => {
				this.cityList2 = res
			})
			
			
			this.getUserAuth() // 获取用户权限
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("生活广告列表")
			})
		},

		// 上拉加载数据分页
		onReachBottom() {
			this.$u.api.collection.getLifeadList({
				page: this.page,
				type: this.type,
				searchKey: this.keyword,
				category_id: this.current,
				in_country: this.value1,
				lifead_city: this.city
			}).then(res => {
				if (res.length <= 0) {
					this.$u.toast(this.$t('没有数据了'))
				} else {
					this.sotreData1 = [...this.sotreData1, ...res]
					this.page++
				}
			})
		},


		methods: {
			getUserAuth() {
				const that = this
				that.$u.api.user.getUserAuth().then(res => {
					that.auth = res
					uni.hideLoading()
				})
			},
			clickVipPopup() {
				this.vipShow = false
			},
			ImageUrl,
			userPage(e) {
				this.$u.route({
					url: 'pages/user/homePage/homePage',
					params: {
						id: e.user_id
					}
				})
			},
			districts(val) {
				return val.length > 7 ? val.slice(0, 8) + "..." : val
			},
			time,
			//详情
			details(i) {
				this.$u.route({
					url: "/pages/index/detail/detail",
					params: {
						id: i.id,
						type: 1,
						releaseType: 'lifead'
					}
				})
			},
			communicate(i) {
				if (this.type == 1) {
					//推广
					this.communicates(i)
				} else if (this.type == 2) {
					//参与竞标
					console.log(this.type)
				}
			},
			communicates(i) {
				createC2CConversation(i.user.mobile, this)
				
			},
			search() {
				this.GoodsList({
					type: this.type,
					searchKey: this.keyword,
					category_id: this.current,
					in_country: this.value1,
					lifead_city: this.city
				})
			},
			change() {
				if(this.value1==0){
					this.$u.api.basic.getSelectCityList({pid:0}).then(res => {
						this.cityList = res
					})
				}else{
					this.cityList = this.cityList2
				}
				
				this.GoodsList({
					type: this.type,
					searchKey: this.keyword,
					category_id: this.current,
					in_country: this.value1,
					lifead_city: this.city
				})
			},
			open1(index) {
				if (index === 1) {
					this.$refs.uDropdown.close();
					this.cityShow1 = true
				}
			},
			//获取国家
			getActionSheetLists() {
				this.$u.api.basic.getActionSheetList({
					type: "country"
				}).then(res => {
					res.forEach(item => {
						this.options1.push({
							label: item.name,
							label_ru: item.name_ru,
							value: item.id
						})
					})
				})
			},
			getSelectCityLists() {
				this.$u.api.basic.getSelectCityList({pid:0}).then(res => {
					this.cityList = res
				})
			},
			getCategoryList() {
				const that = this
				that.$u.api.basic.getCategoryList({
					type: 'release_lifead'
				}).then(res => {
					that.categoryList = res
					that.getDetail()

					// if (that.id > 0) {
					//     that.getDetail()
					// } else {
					//     mapForm(that.formItems, that.id).then(res => {
					//         that.form = res
					//         that.formLoading = true
					//     })
					// }
				}).catch(err => {
				})
			},
			kouan(value) {
				this.city = value[2].label
				this.GoodsList({
					type: this.type,
					searchKey: this.keyword,
					category_id: this.current,
					in_country: this.value1,
					lifead_city: this.city
				})
			},
			selCategory(index) {
				this.current = index.id
				this.GoodsList({
					type: this.type,
					searchKey: this.keyword,
					category_id: this.current,
					in_country: this.value1,
					lifead_city: this.city
				})
			},
			//获取货物列表信息
			GoodsList(data) {
				this.sotreData1 = []
				this.$u.api.collection.getLifeadList(data).then(res => {
					this.sotreData1.push(...res)
				})
			}
		},
		computed: {
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
			storeImages() {
				return (sum, images) => {
					if (!Array.isArray(images)) return images
					return images.length > sum ? images.splice(sum) : images
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-dropdown__menu{
		margin: 0 !important;
	}
	.bidding_news {
		justify-content: center;
		margin-bottom: 31.4rpx;
		width: 100%;
		margin: 0 auto;
		background-color: #f6f6f6;
		padding: 20rpx 30rpx;
		
		.bidding_card {
			width: 692rpx;
			background: $my-bgColorFFFFFF;
			box-shadow: 3rpx 7rpx 3rpx 0rpx rgba(234, 234, 234, 0.5);
			border-radius: 14rpx;
			overflow: hidden;

			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: $my-padding-20;

				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}

			}

			//商品的简介
			.biddin_synopsis {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0 $my-padding-20 $my-padding-20 $my-padding-20;

				.bidding_synopsis_sel {
					padding: 5.23rpx 0 0 0;
					font-size: $my-font-size21;
					font-weight: 400;
					color: #0B0B0B;
					line-height: 70rpx;

					& text:last-child {
						font-weight: 600;
					}
				}
			}

			//商品图片展示区
			.bidding_image {
				padding: $my-padding-20 0 0 $my-padding-20;

				image {
					width: 229.07rpx;
					height: 225.58rpx;
					margin: 0 30rpx 30rpx 0;
					border-radius: 20rpx;
					box-shadow: 0px 0px 8px 0px #ababab;
				}
			}

			//地址信息
			.bidding_address {
				padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: $my-font-size21;
				font-weight: 400;
				color: #888888;
				line-height: 30rpx;

				.bidding_ares {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					.bidding_ares1 {
						display: flex;
						justify-content: flex-start;

						image {
							width: 24.42rpx;
							height: 31.4rpx;
						}
					}
				}
			}
		}
	}

	.search {
	}

	.sel {
		color: $u-type-success;
	}

	.mu-content-top {
		background-color: $my-bgColorFFFFFF;
		width: 100%;
	}

	.area {
		display: grid;
		grid-template-columns: repeat(4, 25%);
		justify-content: space-around;

		.area_item {
			display: flex;
			margin-top: 22rpx;
			margin-bottom: 22rpx;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			word-break: break-all;
			font-size: 21rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.88);
			line-height: 30rpx;
			
			image {
				margin-bottom: 17.44rpx;
			}
		}
	}

	.bidding_address {
		margin-bottom: 8rpx;
	}

	.bidding_betwn {
		display: flex;
		justify-content: space-between;
	}

	._text {
		word-break: break-word;
		text-align: center;
		padding: 0 10rpx 0 10rpx;
	}

	.js {
		width: 200rpx;
		height: 50rpx;
		padding: 10rpx;
		background: linear-gradient(134deg, #DE2D11 0%, #FDB22F 100%);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-right: 20rpx;
		margin-top: 50rpx;
	}
</style>